<template>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="12"
      ><div class="grid-content ep-bg-purple-light" />
      <div style="margin: 20px" />

      <el-form
        ref="loginForm"
        :rules="rules"
        :model="loginUser"
        label-width="100px"
        style="max-width: 460px"
      >
        <h1 class="title">登录</h1>
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginUser.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginUser.password" type="password" />
        </el-form-item>
        <div id="button">
          <el-button type="primary" @click="onLogin('loginForm')"
            >登录</el-button
          >
        </div>

        <div id="link">
          <el-link :underline="false" type="primary" @click="register"
            >注册</el-link
          >
        </div>
      </el-form>
    </el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>

  <video id="bgVid" autoplay muted loop style="width: 100%">
    <source src="@/img/2.mp4" type="video/mp4" />
  </video>

  <button @click="manage">test</button>
</template>

<script>
import { ElMessage } from "element-plus";
import { ref, getCurrentInstance } from "vue-demi";
import router from "@/router/index.js";
import axios from "axios";
import Qs from "qs";

export default {
  name: "onLogin",
  setup() {
    const { ctx } = getCurrentInstance();

    const loginUser = ref({
      username: "",
      password: "",
    });

    const rules = ref({
      username: [
        {
          required: true,
          message: "请输入账号",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 15,
          message: "密码格式不正确",
          trigger: "blur",
        },
      ],
    });

    //提交校验
    let onLogin = (formName) => {
      ctx.$refs[formName].validate((valid) => {
        if (valid) {
          //vue中通过axios给服务器传消息
          axios({
            method: "post",
            // url:"http://localhost:8080/tologin",
            url: "https://3098l4z890.picp.vip/tologin",
            data: Qs.stringify({
              //需要通过Qs的stringify转成formdata的形式
              userName: loginUser.value.username, //model绑定的username
              password: loginUser.value.password, //model绑定的password
            }),
            responseType: "json",
          })
            .then(function (info) {
              if (info.data.success) {
                //跳转功能实现
                ElMessage({
                  showClose: true,
                  message: "登录成功",
                  type: "success",
                });
                router.push("/manage");
                console.log("submit!");
              } else {
                console.log("error submit!");
                ElMessage({
                  showClose: true,
                  message: "登录失败",
                  type: "error",
                });
                return false;
                //清空密码框
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!");
          ElMessage({
            showClose: true,
            message: "登录失败",
            type: "error",
          });
        }
      });
    };

    let register = () => {
      router.push("/register");
    };

    let manage = () => {
      router.push("/manage");
    };

    return { loginUser, rules, onLogin, register, manage };
  },
};
</script>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
}

#bgVid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999;
}

.el-form {
  height: 80%;
  margin-top: 100px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 5px 10px #cccc;
  opacity: 0.9;
}
.el-input {
  width: 80%;
}

#button {
  text-align: center;
}

#link {
  text-align: center;
  margin: 10px;
}
.title {
  padding: 30px 10px 15px;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
